<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .mybtn {
      border: 0;
      background: #f00;
      padding: 10px 20px;
      color: #fff;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div id="app">
    <!-- <button id="btn" class="mybtn">click me</button> -->
  </div>

  <script>

    /* 
      对象：万物皆对象
      类：是具有相同的属性和方法的对象的集合
    */

    // let btn = document.createElement('button')
    // btn.innerHTML = 'click me!!';
    // btn.addEventListener('click', function() {
    //   console.log('haha');
    // }, false);

    // let app = document.getElementById('app')
    // app.appendChild(btn);

    class MyButton {
      btn;

      constructor(params) {
        this.init();
        params.created()
        this.render();
        params.mounted()
      }

      // 已创建
      init() {
        console.log('created...');
        this.btn = document.createElement('button');
        this.btn.id = 'btn1';
        this.btn.innerHTML = 'click me';
        this.btn.className = 'mybtn';
        this.btn.addEventListener('click', function () {
          console.log(Math.random());
        }, false);
      }

      render() {
        console.log('mounted...');
        let app = document.getElementById('app')
        app.appendChild(this.btn); // 在html中渲染出来
      }
      
      // created() {


      // }

      // // 已挂载
      // mounted() {

      // }
    }

    let myBtn1 = new MyButton({
      created() {

      },
      mounted() {
        let btn = document.getElementById('btn1');

        btn.innerHTML = 'haha';
      },
    });

    // let btn = document.getElementById('btn1');

    // btn.innerHTML = 'haha';


  </script>
</body>

</html>